<template>
    <div class="app-container">
        <el-form v-show="showSearch" :model="queryParams" size="small" :inline="true">
            <el-row :gutter="10" class="mb8">
                <el-form-item style="margin-top: 10px;">
                    <el-button type="primary" icon="el-icon-add" @click="handleAdd">添加</el-button>
                </el-form-item>
            </el-row>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
        </el-row>

        <el-table v-loading="loading" :data="deviceList" :stripe="true" :show-overflow-tooltip="true" border>
            <el-table-column label="序号" align="center" prop="id" sortable />
            <el-table-column label="合同订单号" align="center" prop="jitai" />
            <el-table-column label="客户名称" align="center" prop="yunxing" />
            <el-table-column label="联系人" align="center" prop="daiji" />
            <el-table-column label="联系方式" align="center" prop="tingji" />
            <el-table-column label="产品名称" align="center" prop="weihu" />
            <el-table-column label="图号" align="center" prop="shunxu" />
            <el-table-column label="数量" align="center" prop="ynum" />
            <el-table-column label="金额" align="center" prop="ynum" />
            <el-table-column label="客户要求交期" align="center" prop="ynum" />
            <el-table-column label="合同订单类型" align="center" prop="ynum" />
            <el-table-column label="付款方式" align="center" prop="ynum" />
            <el-table-column label="审核状态" align="center" prop="ynum" />
            <el-table-column label="不通过原因" align="center" prop="ynum" />
            <el-table-column label="录入时间" align="center" prop="ynum" />
            <el-table-column label="附件预览" align="center" prop="ynum" />
            <el-table-column label="备注" align="center" prop="ynum" />
            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body destroy-on-close>
            <el-form ref="form" :model="form" :rules="rules" label-width="110px">
                <el-row>
                    <el-col>
                        <el-form-item label="客户名称" prop="jitai">
                            <el-input v-model="form.jitai" placeholder="请输入设备号" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="联系人" prop="yunxing">
                            <el-input v-model="form.yunxing" placeholder="请输入运行" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="联系方式" prop="daiji">
                            <el-input v-model="form.daiji" placeholder="请输入待机" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="客户订单号" prop="tingji">
                            <el-input v-model="form.tingji" placeholder="请输入停机" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="产品名称" prop="weihu">
                            <el-input v-model="form.weihu" placeholder="请输入维护" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="规格型号" prop="shunxu">
                            <el-input v-model="form.shunxu" placeholder="请输入顺序" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="图号" prop="ynum">
                            <el-input v-model="form.ynum" placeholder="请输入Y轴顺序" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="计划数量" prop="ynum">
                            <el-input v-model="form.ynum" placeholder="请输入Y轴顺序" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="客户要求交期" prop="ynum">
                            <el-input v-model="form.ynum" placeholder="请输入Y轴顺序" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="原材料名称" prop="ynum">
                            <el-input v-model="form.ynum" placeholder="请输入Y轴顺序" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="单价金额（含税）" prop="ynum">
                            <el-input v-model="form.ynum" placeholder="请输入Y轴顺序" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="付款方式" prop="ynum">
                            <el-input v-model="form.ynum" placeholder="请输入Y轴顺序" />
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="订单类型" prop="ynum">
                            <el-radio-group v-model="form.resource">
                                <el-radio label="一般"></el-radio>
                                <el-radio label="特殊"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="附件（合同草案/图纸）" prop="ynum">
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                                multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="备注" prop="ynum">
                            <el-input v-model="form.ynum" placeholder="请输入Y轴顺序" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getShebei } from '@/api/productManage/index'

export default {
    name: 'SystemUser',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                page: 1,
                pageSize: 10,
            },
            deviceList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {
                id: 0
            },
            // 表单校验
            rules: {
                jitai: [
                    { required: true, message: '设备不能为空', trigger: 'blur' }
                ],
                daiji: [
                    { required: true, message: '待机不能为空', trigger: 'blur' }
                ],
                tingji: [
                    { required: true, message: '停机不能为空', trigger: 'blur' }
                ],
                weihu: [
                    { required: true, message: '维护不能为空', trigger: 'blur' }
                ],
                shunxu: [
                    { required: true, message: '顺序不能为空', trigger: 'blur' }
                ],
                ynum: [
                    { required: true, message: 'Y轴顺序不能为空', trigger: 'blur' }
                ],
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {
        /** 查询用户列表 */
        getList() {
            this.loading = false
            getShebei(this.queryParams).then((response) => {
                this.deviceList = response.data
                this.total = response.total
                this.loading = false
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.open = true
            this.title = '录入订单'
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.form = row
            this.title = '修改订单信息'
            this.open = true
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal
                .confirm('是否确认删除名称为"' + row.name + '"的数据项?')
                .then(function () {
                    return delDept(row.id)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                })
                .catch(() => { })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.id !== undefined) {
                        updateDept(this.form).then((response) => {
                            this.$modal.msgSuccess('修改成功')
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addDept(this.form).then((response) => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },

    }
}
</script>
<style scoped>
.msgTxt {
    margin-bottom: 5px;
    font-size: 12px;
}
</style>